import React, { Component } from 'react'
import {Link,Route} from 'react-router-dom'
import Detail from '../Detail'

export default class Message extends Component {
	state = {
		messageList:[
			{id:'001',title:'尚硅谷消息1',content:'好好学习'},
			{id:'002',title:'尚硅谷消息2',content:'天天向上'},
			{id:'003',title:'尚硅谷消息3',content:'少玩游戏'},
		]
	}
	render() {
		return (
			<div>
				<ul>
					{
						this.state.messageList.map((msgObj)=>{
							return (
								<li key={msgObj.id}>
									{/* state参数 */}
									<Link to={{
										pathname:'/home/message/detail/',
										state:{
											id:msgObj.id,
											title:msgObj.title,
											content:msgObj.content
										}
									}}>
										{msgObj.title}
									</Link>&nbsp;&nbsp;
									<button onClick={this.showDetail(msgObj)}>点我查看详情</button>
								</li>
							)
						})
					}
				</ul>
				<hr />
				<Route path="/home/message/detail" component={Detail}/>
				<button onClick={this.back}>←后退</button>
				<button onClick={this.forward}>前进→</button>
				<button onClick={this.testGo}>测试一下go</button>
			</div>
		)
	}
	showDetail = (msgObj)=>{
		return ()=>{
			//编写一段代码，让路径发生变化
			this.props.history.push({
				pathname:'/home/message/detail/',
				state:{
					id:msgObj.id,
					title:msgObj.title,
					content:msgObj.content
				}
			})
		}
	}
	back = ()=>{
		this.props.history.goBack()
	}
	forward = ()=>{
		this.props.history.goForward()
	}
	testGo = ()=>{
		this.props.history.go(-2)
	}
}
